<template>
  <span
    class="fa-tag"
    :class="[`fa-tag--${size || 'small'}`, `fa-tag--${effect || 'light'}`, `fa-tag--${type || 'primary'}`, tagClass]"
    ><slot>{{ text }}</slot></span
  >
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { TagProps } from './type'

export default defineComponent({
  name: 'FaTag',

  props: {
    /** 文本内容 */
    text: {
      type: String,
      default: ''
    },

    /** 尺寸 */
    size: {
      type: String as PropType<TagProps['size']>,
      default: 'small'
    },

    /** 类型 */
    type: {
      type: String as PropType<TagProps['type']>,
      default: 'primary'
    },

    /** 主题 */
    effect: {
      type: String as PropType<TagProps['effect']>,
      default: 'light'
    },

    /** 自定义标签样式 */
    tagClass: {
      type: String,
      default: ''
    }
  }
})
</script>

<style lang="scss">
.fa-tag {
  display: inline-block;
  padding: 0 8px;
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
  border: 1px solid transparent;
  user-select: none;

  &--medium {
    padding: 0 8px;
    font-size: 14px;
    line-height: 24px;
    border-radius: 4px;
  }

  &--small {
    padding: 0 6px;
    font-size: 12px;
    line-height: 20px;
    border-radius: 4px;
  }

  &--mini {
    padding: 0 4px;
    font-size: 12px;
    line-height: 16px;
    border-radius: 2px;
  }

  @each $t, $color in $theme-colors {
    $light: rgba($color, 0.08);
    $normal: mix($color, #fff, 80%);

    &--#{$t}.fa-tag {
      &--light {
        color: $color;
        background-color: $light;
      }

      &--normal {
        color: #fff;
        background-color: $normal;
      }

      &--dark {
        color: #fff;
        background-color: $color;
      }

      &--plain {
        color: $color;
        border-color: $normal;
      }
    }
  }
}
</style>
